<template>
  <div>
    <qr-code ref="qrCode" class="qr-box" :value="qrText" width="100" height="100"></qr-code>
    <el-input v-model="qrText" type="textarea" placeholder="请输入内容" class="qr-text"></el-input>
    <el-button class="btn" @click="reBuild">生成</el-button>
    <p class="footer">本组件目前构建基于 <a href="https://github.com/davidshimjs/qrcodejs">[davidshimjs/qrcodejs]</a></p>
  </div>

</template>

<script>
import qrCode from '../component/qrCode'

export default {
  name: 'qrCodeUseCase',
  components: {
    qrCode
  },
  data () {
    return {
      qrText: 'https://www.jianshu.com/u/42be3945a3bd',
      value: ''
    }
  },
  methods: {
    reBuild () {
      this.$refs.qrCode.refresh(this.qrText)
    }
  },
  created () {

  }
}
</script>

<style scoped>
  .qr-box {
    width: 100px;
    height: 100px;
    margin: 30px auto;
  }

  .qr-text {
    display: block;
    margin: 50px auto;
    width: 80%;
  }

  .btn {
    display: block;
    margin: 0 auto;
  }

  .footer {
    position: absolute;
    width: 80%;
    bottom: 50px;
    right: 0;
  }
</style>
